<template>
  <div id="app">
    <div class="content-container">
      <div class="image-container">
        <!--        <img src="@/assets/img/publicBrand/绘制数字农业产业园图 (1).png" alt="Image 1" class="image" />-->
        <img :src="imageUrls[0]" alt="数字农业产业园图片" class="left-image" />
        <!--        <img src="@/assets/img/publicBrand/绘制数字农业产业园图 (1).png" alt="Image 2" class="left-image" />-->
        <img :src="imageUrls[1]" alt="绘制数字农业产业园图" class="left-image" />
      </div>

      <DynamicFlowEconomyComponent
          :title="'打造数字农业产业园“茶芋竹”金三角'"
          :content="[
'基于现有的“两红”特色产业基础，建设数字化的加工生产线，实现农产品的产地初加工和精深加工，提高农产品附加值。大力发展红芽芋下游衍生产业，如芋饼、芋泥奶茶、红芽芋饮品等食品饮料。同时开发茶饮料、茶食品、茶保健品等多元化产品。发展竹林深加工产业，打造铅山“茶芋竹”金三角。利用物联网、大数据、云计算等技术，开发农业生产管理系统，实现对“茶芋竹”产业的生产计划、农事作业、投入品管理、作物生长监测、产量预测等全过程的数字化管理，建立“一个数据中心 + N个业务系统”，实现种植环境、过程、设备的全面感知与自动控制。打造融合农业、科技、产业、金融、治理于一体的数字农业产业园。建立完善的农产品物流配送网络，打造智能化的冷链物流和仓储设施，实现农产品的高效运输和保鲜储存，降低农产品损耗，确保农产品的品质和安全。'
      ]"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import DynamicFlowEconomyComponent from "@/views/regionalPublicBrand/DynamicFlowEconomyComponent.vue";

// 定义图片URL数组
const imageUrls = [
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E7%94%9F%E6%88%90%E6%95%B0%E5%AD%97%E5%86%9C%E4%B8%9A%E4%BA%A7%E4%B8%9A%E5%9B%AD%E5%9B%BE%E7%89%87.png',
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E7%BB%98%E5%88%B6%E6%95%B0%E5%AD%97%E5%86%9C%E4%B8%9A%E4%BA%A7%E4%B8%9A%E5%9B%AD%E5%9B%BE.png'
];

// 预加载图片函数
const preloadImages = () => {
  imageUrls.forEach((url, index) => {
    const img = new Image();
    img.src = url;
    const altText = index === 0 ? '数字农业产业园图片' : '绘制数字农业产业园图';
    img.onload = () => {
      console.log(`图片预加载成功: ${altText}`);
    };
    img.onerror = (error) => {
      console.error(`图片预加载失败: ${altText}`, error);
    };
  });
};

// 在组件挂载前预加载图片
onMounted(() => {
  preloadImages();
});
</script>

<style scoped>
.content-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.left-image {
  width: 500px; /* 根据需要调整图片宽度 */
  margin-right: 20px; /* 图片与文本之间的间距 */
  margin-bottom: 40px;
}

#app {
  padding: 20px; /* 页面内边距 */
}

.content p {
  line-height: 1.6;
}
</style>
